<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>积分获取
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="form" label-width="100px">
            <el-form-item label="机构名称">
              <el-input
                placeholder="请输入机构名称"
                v-model="form.oemName"
              ></el-input>
            </el-form-item>
            <el-form-item label="规则名称">
              <el-input
                placeholder="请输入规则名称"
                v-model="form.activeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="启用状态">
              <el-select v-model="form.status" placeholder>
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="0"></el-option>
                <el-option label="关闭" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="规则类型">
              <el-select v-model="form.activeType" placeholder>
                <el-option label="全部" value=""></el-option>
                <el-option label="网申办卡" value="5"></el-option>
                <el-option label="伙伴拉新" value="8"></el-option>
                <el-option label="兑换商品" value="7"></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="规则状态">
              <el-select v-model="form.type" placeholder>
                <el-option label="全部" value=""></el-option>
                <el-option label="已上线" value="0"></el-option>
                <el-option label="已过期" value="1"></el-option>
                <el-option label="未开始" value="2"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="创建时间">
              <div style="display: flex">
                <el-date-picker
                  type="date"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="form.startDate"
                  style="width: 100%"
                ></el-date-picker>
                <div class="times">&nbsp;&nbsp;-&nbsp;&nbsp;</div>
                <el-date-picker
                  type="date"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="form.endDate"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-form>

          <div style="clear: both"></div>
          <div style="margin-left: 30px; margin-top: 20px">
            <div class="btnGroup">
              <el-button type="primary" @click="search">搜索</el-button>

              <el-button @click="reset">重置</el-button>
              <el-dropdown @command="handleCommand" style="margin-left: 10px">
                <el-button plain>
                  新建规则<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item command="card">网申办卡</el-dropdown-item> -->
                  <el-dropdown-item command="new">伙伴拉新</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <el-table
          style="margin-top: 30px"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column
            min-width="200"
            label="机构名称"
            prop="oemName"
          ></el-table-column>
          <el-table-column min-width="200" label="规则类型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.activeType == 5">网申办卡</span>
                <span v-if="scope.row.activeType == 8">伙伴拉新</span>
                <span v-if="scope.row.activeType == 7">兑换商品</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="200"
            label="规则名称"
            prop="activeName"
          ></el-table-column>
          <el-table-column min-width="270" label="规则时间">
            <template slot-scope="scope">
              <div>{{ scope.row.startDate }} - {{ scope.row.endDate }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="200" label="规则状态" prop="ruleStatus">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.ruleStatus == 0">未上线</span>
                <span v-if="scope.row.ruleStatus == 1">已上线</span>
                <span v-if="scope.row.ruleStatus == 2">已过期</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="200"
            label="创建时间"
            prop="createDate"
          ></el-table-column>
          <el-table-column min-width="200" label="启用状态" prop="channelName">
            <template slot-scope="scope">
              <div>
                <el-switch
                  @change="bian(scope.row)"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  active-value="0"
                  inactive-value="1"
                  inactive-color="#cccccc"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="200" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="cat(scope.row)">查看</el-button>
                <el-button
                  type="text"
                  @click="set(scope.row)"
                  v-if="jurisdiction != 2"
                  >修改</el-button
                >
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            min-width="200"
            label="机构ID"
            prop="oemUid"
          ></el-table-column> -->
          <!-- <el-table-column
            min-width="200"
            label="机构名称"
            prop="oemName"
          ></el-table-column> -->

          <!-- <el-table-column
            min-width="200"
            label="规则名称"
            prop="activeName"
          ></el-table-column> -->
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form.currPage"
          :page-size="form.pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { currentDate, sevenData, CompareDate } from "../../assets/js/commion";
export default {
  data() {
    return {
      // 当前时间
      newData: "",
      values: "1",
      activeName: "",
      tableData: "",
      // 表格
      list: [
        {
          channelName: "123",
        },
      ],
      total: "",
      form: {
        oemName: "",
        activeName: "", //活动名称
        status: "", //启用状态  0 启用 1不启用
        activeType: "", //规则类型
        startDate: "", //开始时间
        endDate: "", //结束时间
        modify: "0",
        pageSize: 20, //一页几条
        currPage: 1, //第几页
      },
    };
  },
  created() {
    this.jurisdiction = localStorage.getItem("jurisdiction");
    this.getData();
    // this.form.startDate = currentDate();
    // this.form.endDate = sevenData();
  },
  methods: {
    // 重置
    reset() {
      this.form.currPage = 1;
      this.form.oemName = "";
      this.form.activeName = "";
      this.form.status = "";
      this.form.startDate = "";
      this.form.endDate = "";
      this.getData();
    },
    // 状态发生变化
    bian(val) {
      console.log(val);
      let status = val.status;
      if (status == 1) {
        status = 0;
      } else {
        status = 1;
      }
      axios
        .post("scoActive/modifyActiveStatus", {
          uid: val.uid,
          status: val.status,
        })
        .then((res) => {
          console.log("开关");
          console.log(res);
          this.getData();
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    search() {
      if (this.form.startDate != "" && this.form.endDate != "") {
        if (CompareDate(this.form.startDate, this.form.endDate)) {
          this.form.currPage = 1
          this.getData();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
        this.form.currPage = 1
        this.getData();
      }
    },
    // 修改
    set(val) {
      this.$router.push({
        name: "handleCard",
        query: {
          type: "0001",
          uid: val.uid,
        },
      });
    },
    // 查看
    cat(val) {
      this.$router.push({
        name: "handleCard",
        query: {
          type: "0002",
          uid: val.uid,
        },
      });
    },

    // 获取数据
    getData() {
      axios
        .post("scoActive/scoActiveList", this.form)
        .then((res) => {
          console.log(res);
          if (res.data.code == "500") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
          this.tableData = res.data.data.records;
          this.total = Number(res.data.data.total);

          // layer.open({
          //   content: res.data.msg,
          //   skin: "msg",
          //   time: 1, //1秒后自动关闭
          // });
          return;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 跳转页面
    handleCommand(command) {
      if (command == "new") {
        this.$router.push({
          name: "handleCard",
        });
      }
    },

    // 第几页
    handleCurrentChange(val) {
      console.log(val);
      this.form.currPage = val;
      this.getData();
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(val);
      this.form.pageSize = val;
      this.getData();
    },
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>